<div class="modal" ng-controller="SaveModelCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2>{{ 'MODEL.SAVE.TITLE' | translate }}</h2>
      </div>
      <div class="modal-body">
        <div
          ng-if="saveDialog.errorMessage && saveDialog.errorMessage.length > 0"
          class="alert error"
          style="font-size: 14px; margin-top:20px"
        >
          <div class="popup-error" style="font-size: 14px">
            <span class="glyphicon glyphicon-remove-circle"></span>
            <span>{{ saveDialog.errorMessage }}</span>
          </div>
        </div>
        <div class="form-group">
          <label for="nameField">{{ 'MODEL.NAME' | translate }}</label>
          <input
            type="text"
            ng-disabled="status.loading || (error && error.conflictResolveAction == 'saveAs')"
            id="nameField"
            class="form-control"
            ng-model="saveDialog.name"
            auto-focus
          />
        </div>
        <div class="form-group">
          <label for="keyField">{{ 'MODEL.KEY' | translate }}</label>
          <input
            type="text"
            ng-disabled="status.loading || (error && error.conflictResolveAction == 'saveAs') || (modelVersion != 'null')"
            id="keyField"
            class="form-control"
            ng-model="saveDialog.key"
          />
        </div>
        <div class="form-group">
          <label for="docTextArea">{{ 'MODEL.DESCRIPTION' | translate }}</label>
          <textarea
            id="docTextArea"
            ng-disabled="status.loading"
            class="form-control"
            ng-model="saveDialog.description"
          ></textarea>
        </div>
        <div class="checkbox" ng-show="!error && !error.isConflict">
          <label>
            <input type="checkbox" ng-disabled="status.loading" ng-model="saveDialog.newVersion" />
            {{ 'MODEL.SAVE.NEWVERSION' | translate }}
          </label>
        </div>
        <div class="form-group" ng-if="saveDialog.newVersion">
          <label for="commentTextArea">{{ 'MODEL.SAVE.COMMENT' | translate }}</label>
          <textarea
            id="commentTextArea"
            class="form-control"
            ng-model="saveDialog.comment"
            ng-disabled="status.loading"
          ></textarea>
        </div>

        <div ng-if="saveDialog.validationErrors" class="alert error" style="font-size: 14px; margin-top:20px">
          <div class="popup-error" style="font-size: 14px">
            <span class="glyphicon glyphicon-remove-circle"></span>
            <span>{{ 'MODEL.VALIDATIONERRORS' | translate: error }}</span>
          </div>
        </div>

        <div
          ng-if="error && error.isConflict && !status.loading"
          class="alert error"
          style="font-size: 14px; margin-top:20px"
        >
          <div class="popup-error" style="font-size: 14px">
            <span class="glyphicon glyphicon-remove-circle"></span>
            <span>{{ 'MODEL.CONFLICT.WRITE' | translate: error }}</span>
          </div>

          <div>
            <div style="font-size: 14px; margin-bottom: 10px">{{ 'MODEL.CONFLICT.WRITE.OPTIONS' | translate }}</div>
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-danger" ng-click="error.conflictResolveAction = 'overwrite'">
                <input type="radio" name="options" id="option1" />
                {{ 'MODEL.CONFLICT.WRITE.OPTION.OVERWRITE' | translate }}
              </label>
              <label class="btn btn-danger" ng-click="error.conflictResolveAction = 'discardChanges'">
                <input type="radio" name="options" id="option2" />
                {{ 'MODEL.CONFLICT.WRITE.OPTION.DISCARDCHANGES' | translate }}
              </label>
              <label class="btn btn-danger" ng-click="error.conflictResolveAction = 'saveAs'">
                <input type="radio" name="options" id="option3" ng-disabled="account.type != 'enterprise'" />
                {{ 'MODEL.CONFLICT.WRITE.OPTION.SAVEAS' | translate }}
              </label>
              <label class="btn btn-danger" ng-click="error.conflictResolveAction = 'newVersion'">
                <input type="radio" name="options" id="optio43" />
                {{ 'MODEL.CONFLICT.WRITE.OPTION.NEWVERSION' | translate }}
              </label>
            </div>

            <div ng-if="error.conflictResolveAction == 'saveAs'" style="margin-top: 10px">
              <span>{{ 'MODEL.CONFLICT.SAVEAS' | translate }}</span>
              <input type="text" ng-model="error.saveAs" style="width: 300px" auto-focus />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="pull-right">
          <button type="button" class="btn" ng-click="close()" ng-disabled="status.loading" translate>
            ACTION.CANCEL
          </button>
          <button
            class="btn btn-primary"
            ng-click="saveAndClose()"
            ng-disabled="status.loading || saveDialog.name.length == 0 || saveDialog.key.length == 0"
            ng-show="!error && !error.isConflict"
            translate
          >
            ACTION.SAVE-AND-CLOSE
          </button>
          <button
            class="btn btn-primary"
            ng-click="save()"
            ng-disabled="status.loading || saveDialog.name.length == 0 || saveDialog.key.length == 0"
            ng-show="!error && !error.isConflict"
            translate
          >
            ACTION.SAVE
          </button>
          <button
            class="btn btn-primary"
            ng-click="okClicked()"
            ng-disabled="isOkButtonDisabled()"
            ng-show="error && error.isConflict"
            translate
          >
            ACTION.OK
          </button>
        </div>

        <div class="pull-right popup-error" ng-if="error && !error.isConflict">
          <span>{{ 'MODEL.SAVE.ERROR' | translate }}</span>
        </div>

        <loading></loading>
      </div>
    </div>
  </div>
</div>
